<template>
  <!-- 防止页面滚动 -->
  <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
  <view class="view">
    <view :class="['page-mask', show ? 'page-mask-show' : 'page-mask-hidden']"></view>
    <!--  搜索栏 -->
    <mSearch :noClear="clearSearch" @input="handleSearch" :result="result"></mSearch>

    <!-- 广告栏 -->
    <mSwiper></mSwiper>

    <!-- 荔枝上市倒计时 -->
    <!-- <mCountdown></mCountdown> -->

    <!-- 菜单栏 -->
    <mMenu :menus="menus"></mMenu>

    <!-- 新人福利栏 -->
    <mNewComer></mNewComer>

    <!-- 标题 -->
    <view class="title">在售荔枝</view>

    <!-- 商品栏 -->
    <view>
      <mIndexProduct :goods="goods" v-for="goods in goodsList" :key="goods.id"></mIndexProduct>
    </view>
  </view>
</template>

<script>
import mSearch from '@/components/mSearch/index.vue'
import mSwiper from '@/components/mSwiper/index.vue'
import mMenu from '@/components/mMenu/index.vue'
import mCountdown from '@/components/mCountdown/index.vue'
import mNewComer from '@/components/mNewComer/index.vue'
import mIndexProduct from '@/components/mIndexProduct/index.vue'
import { uniSearchBar } from '@dcloudio/uni-ui'

export default {
  components: { mSearch, mSwiper, uniSearchBar, mMenu, mCountdown, mNewComer, mIndexProduct },
  data() {
    return {
      clearSearch: '',
      menus: [
        {
          icon: '../../static/menu/3.png',
          title: '荔枝鉴赏',
          pageUrl: '/pages/enjoy/index'
        },
        {
          icon: '../../static/menu/4.jpeg',
          title: '积分兑换',
          pageUrl: '/pages/integral/index'
        },
        {
          icon: '../../static/menu/6.png',
          title: '每日签到',
          pageUrl: '/pages/sign/index'
        },
        {
          icon: '../../static/menu/1.png',
          title: '领券中心',
          pageUrl: '/pages/coupon/index?i=0'
        }
        // {
        //   icon: '../../static/menu/2.png',
        //   title: '产地周边',
        //   pageUrl: '/pages/enjoy/index'
        // },
        // {
        //   icon: '../../static/menu/live.png',
        //   title: 'ai鉴别',
        //   pageUrl: '/pages/enjoy/index'
        // }
      ],
      goodsList: [],
      result: [],
      show: false
    }
  },
  onLoad() {
    this.getGoodsList()
  },
  methods: {
    async getGoodsList() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getMinGoodsList'
      })

      if (res.status != 200) {
        this.$checkStatus(res.status, res.message)
        return
      }

      this.goodsList = res.data
    },
    async queryGoodsNameList(searchStr) {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getGoodsNameListByQuery?query=' + searchStr
      })

      // console.log(res)
      if (res.status !== 200) {
        this.$checkStatus(res.status, res.message)
        return
      }

      this.result = res.data.data
    },
    handleSearch(e) {
      this.show = e.show
      this.queryGoodsNameList(e.details)
    }
  },
  onShow() {
    this.getGoodsList()
    this.clearSearch = false // 先设为 false，触发搜索框清空
    this.$nextTick(() => {
      this.clearSearch = true // 立即再设回 true，防止影响下一次输入
    })
    // console.log('页面显示，搜索框内容已清空')
  },
  onHide() {
    this.clearSearch = false // 先设为 false，触发搜索框清空
    this.$nextTick(() => {
      this.clearSearch = true // 立即再设回 true，防止影响下一次输入
    })
    // console.log('页面显示，搜索框内容已清空')
  }
}
</script>

<style lang="scss" scoped>
.title {
  padding: 20upx 0;
  font-weight: bold;
  font-size: 35upx;
  text-align: center;
  color: #e44832;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}
</style>
